<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, minimal-ui">
    <title>设备绑定</title>
    <link rel="stylesheet" href="../../vendor/swiper/swiper.min.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">  -->
</head>

<body>

    <!-- Overlay panel -->
    <div class="body-overlay"></div>
    <!-- Left panel -->
    <div id="panel-left"></div>
    <!-- Right panel -->
    <div id="panel-right"></div>


    <div id='app' class="page page--main" data-page="form">

        <header class="header header--page header--fixed">
            <div class="header__inner">
                <div class="header__icon">
                    <a href="../../../index.html"><img src="../../assets/images/icons/white/arrow-back.svg" alt="" title="" /></a>
                </div>
                <div class="header__logo header__logo--text"><a href="#">设备绑定</a></div>
                <div class="header__icon header__icon--empty-space"></div>

            </div>
        </header>

        <!-- PAGE CONTENT -->
        <div class="page__content page__content--with-header">
            <h2 class="page__title">设备绑定</h2>
            <!-- <p class="welcome">
        请填写预约设备
      </p> -->
            <div class="fieldset">
                <div class="form">
                    <form id="Form" method="post" action="checkout.html">
                        <div class="form__row">
                            <van-cell is-link @click="show = true" title="选择设备" :value="currentDateStr" size="large"></van-cell>
                            <van-popup v-model="show" round position="bottom">
                                <van-datetime-picker v-model="currentDate" type="datetime" title="选择设备" @cancel="show = false" @confirm="onconfirm" :formatter="formatter" />
                            </van-popup>
                        </div>
                        <div class="form__row d-flex align-items-center justify-space">
                            <van-cell is-link @click="show2 = true" title="选择设备" :value="currentDateStr2" size="large"></van-cell>
                            <van-popup v-model="show2" round position="bottom">
                                <van-datetime-picker v-model="currentDate2" type="datetime" title="选择设备" @cancel="show2 = false" @confirm="onconfirm2" :formatter="formatter" />
                            </van-popup>
                        </div>
                        <div class="form__row d-flex align-items-center justify-space">

                            <van-cell is-link @click="show3 = true" title="v" :value="Instrumenttest" size="large"></van-cell>
                            <van-popup v-model="show3" round position="bottom">
                                <van-picker title="选择设备" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="show3 = false" />
                            </van-popup>
                        </div>
                        <div class="form__row d-flex align-items-center justify-space">
                            <van-field name="stepper" label="编号" size="large">
                                <template #input>
                  <van-stepper v-model="Instrumentnum" />
                </template>
                            </van-field>
                        </div>

                        <div class="form__row mt-40">
                            <input type="button" name="submit" class="form__submit button button--main button--full" style="font-size: 1.6rem;" @click="onSubmit" value="提交预约" />
                        </div>
                    </form>
                </div>
            </div>




        </div>




    </div>
    <!-- PAGE END -->


    <!-- Social Icons Popup -->
    <div id="popup-social"></div>

    <!-- Alert -->
    <div id="popup-success"></div>

    <!-- Notifications -->
    <div id="popup-notifications"></div>

    <script src="../../vendor/jquery/jquery-3.5.1.min.js"></script>
    <script src="../../vendor/jquery/jquery.validate.min.js"></script>
    <script src="../../vendor/swiper/swiper.min.js"></script>
    <script src="js/swiper-init-swipe.js"></script>
    <script src="js/jquery.custom.js"></script>
</body>










<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> -->

<script src="../../../js/vue/vue.js"></script>
<script src="../../../js/jsCookie/js.cookie.min.js"></script>
<script src="../../../js/axios/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>



<script>
    var app = new Vue({
        el: "#app",
        data: {
            username: '',
            user: {},
            currentDate: new Date(),
            currentDateStr: '',
            show: false,
            currentDate2: new Date(),
            currentDateStr2: '',
            show2: false,
            columns: [],
            show3: false,
            Instrumentnum: 1,
            Instrumentvalue: '',
            Instrumenttest: '',
            InstrumentList: [],
        },
        methods: {
            getCookieUser() {
                let userJson = Cookies.get('userInfo');
                if (!userJson) {
                    this.$notify({
                        type: 'danger',
                        message: '请先登录'
                    });
                    window.location.href = '../login.html'
                    return
                }
                this.user = JSON.parse(userJson)
                if (!this.user) {
                    this.$notify({
                        type: 'danger',
                        message: '请先登录'
                    });
                    window.location.href = '../login.html'
                    return
                }
                this.findInstrument()
            },
            onSubmit() {
                if (this.currentDate > this.currentDate2) {
                    this.$dialog.alert({
                        message: '结束时间应该大于预约时间',
                        theme: 'round-button',
                    }).then(() => {});
                    return
                }

                if (this.Instrumentvalue == '') {

                    this.$dialog.alert({
                        message: '选择设备归类',
                        theme: 'round-button',
                    }).then(() => {});
                    return

                }
                let formData = new FormData();
                // formData.append("randow", Math.random());
                formData.append("startTime", this.currentDateStr);
                formData.append("endTime", this.currentDateStr2);
                formData.append("appointmentCause", '');
                formData.append("classification", this.Instrumentvalue + '|' + this.Instrumentnum);
                // formData.append("remarks", '');
                // formData.append("classesId", '');
                // formData.append("peopleNum",);
                // formData.append("isVerify", '');

                this.showBtn = false
                axios
                    .post(
                        "http://10.11.41.128:30010/insrtumentAppointment/add?ticket=" + Cookies.get('ticket'), formData, {
                            headers: {
                                "Content-Type": "multipart/form-data",
                                "token": this.user.token,
                            },
                        }
                    )
                    .then((res) => {
                        if (res.data === null || res.data === "") return;
                        if (res.data.msg === '请求成功') {
                            this.$notify({
                                type: 'success',
                                message: '提交成功！'
                            });

                            setTimeout(() => {
                                this.showBtn = true
                                location.reload();
                            }, 1500);
                        } else {
                            this.showBtn = true
                            this.$notify({
                                type: 'danger',
                                message: '加载失败' + res.data.msg
                            });
                        }
                    });
            },
            getDate(date) {
                let y = date.getFullYear()
                let MM = date.getMonth() + 1
                MM = MM < 10 ? ('0' + MM) : MM
                let d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                let h = date.getHours()
                h = h < 10 ? ('0' + h) : h
                let m = date.getMinutes()
                m = m < 10 ? ('0' + m) : m
                let s = date.getSeconds()
                s = s < 10 ? ('0' + s) : s
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
            },
            onconfirm(value) {
                this.currentDateStr = this.getDate(value)
                this.show = false
            },
            onconfirm2(value) {
                this.currentDateStr2 = this.getDate(value)
                this.show2 = false
            },
            formatter(type, val) {
                if (type === 'year') {
                    return val + '年';
                }
                if (type === 'month') {
                    return val + '月';
                }
                if (type === 'day') {
                    return val + '日';
                }
                if (type === 'hour') {
                    return val + '时';
                }
                if (type === 'minute') {
                    return val + '分';
                }
                return val;
            },
            findInstrument() {
                let formData = new FormData();
                formData.append("randow", Math.random());
                axios
                    .post(
                        "http://10.11.41.128:30010/insrtumentAppointment/findInstrumentClassificationByAppointment?ticket=" + Cookies.get('ticket'), formData, {
                            headers: {
                                "Content-Type": "multipart/form-data",
                                "token": this.user.token,
                            },
                        }
                    )
                    .then((res) => {

                        if (res.data === null || res.data === "") return;
                        if (res.data.data) {
                            this.InstrumentList = res.data.data.dataList
                            this.InstrumentList.forEach(function(item, idnex, array) {
                                this.app.columns.push({
                                    text: item.NAME + " [可预约:" + item.APPOINTMENTNUM + "]",
                                    value: item.ID,

                                })
                            })
                        } else {
                            this.$notify({
                                type: 'danger',
                                message: '加载失败' + res.data.msg
                            });
                        }
                    });
            },
            onConfirm(value, index) {
                this.show3 = false
                this.Instrumentvalue = value.value
                this.Instrumenttest = value.text
            },

        },
        mounted: function() {
            this.getCookieUser();
            var curTime = new Date();
            var addHour = curTime.setHours(curTime.getHours() + 1);
            var addHour2 = curTime.setHours(curTime.getHours() + 2);
            this.currentDateStr = this.getDate(new Date(addHour))
            this.currentDateStr2 = this.getDate(new Date(addHour2))
            this.currentDate = addHour
            this.currentDate2 = addHour2
        },
    });
</script>

</html>